<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<style>
    html, body, #main {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #main {
        background: #fff;
    }
</style>
<div id="main"></div>

<script src="data/timelineGDP.js"></script>

<script>

    // markLine: {
    //     symbol: ['arrow','none'],
    //     symbolSize: [4, 2],
    //     itemStyle: {
    //         normal: {
    //             lineStyle: {color:'orange'},
    //             barBorderColor:'orange',
    //             label: {
    //                 position:'left',
    //                 formatter:function(params){
    //                     return Math.round(params.value);
    //                 },
    //                 textStyle:{color:'orange'}
    //             }
    //         }
    //     },
    //     data: [{type: 'average', name: '平均值'}]
    // }

    require([
        'echarts'
        // 'echarts/chart/bar',
        // 'echarts/chart/pie',
        // 'echarts/component/title',
        // 'echarts/component/legend',
        // 'echarts/component/grid',
        // 'echarts/component/tooltip',
        // 'echarts/component/timeline'
    ], function (echarts) {

        var chart = echarts.init(document.getElementById('main'), null, {});

        var option = {
            baseOption: {
                timeline: {
                    // y: 0,
                    axisType: 'category',
                    // realtime: false,
                    // loop: false,
                    autoPlay: true,
                    // currentIndex: 2,
                    playInterval: 1000,
                    controlStyle: {
                        showNextBtn: false,
                        showPrevBtn: false,
                        position: 'left'
                    },
                    data: [
                        '2002-01-01', '2003-01-01', '2004-01-01',
                        {
                            itemStyle: {
                                normal: {
                                    color: 'green'
                                }
                            },
                            value: '2005-01-01',
                            tooltip: {
                                formatter: '{b} GDP达到一个高度'
                            },
                            symbol: 'diamond',
                            symbolSize: 16,
                        },
                        '2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01', '2010-01-01',
                        {
                            value: '2011-01-01',
                            tooltip: {
                                formatter: function (params) {
                                    return params.name + 'GDP达到又一个高度';
                                }
                            },
                            symbol: 'diamond',
                            symbolSize: 18
                        },
                    ],
                    label: {
                        formatter: function (s) {
                            return (new Date(s)).getFullYear();
                        }
                    }
                },
                title: {
                    subtext: '数据来自国家统计局'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    align: 'right',
                    x: 'right',
                    data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
                    selected: {
                        'GDP': false, '金融': false, '房地产': false
                    }
                },
                calculable: true,
                grid: {
                    top: 80, bottom: 100
                },
                xAxis: {
                    'type': 'category',
                    'axisLabel': {'interval': 0},
                    'data': [
                        '北京', '\n天津', '河北', '\n山西', '内蒙古', '\n辽宁', '吉林', '\n黑龙江',
                        '上海', '\n江苏', '浙江', '\n安徽', '福建', '\n江西', '山东', '\n河南',
                        '湖北', '\n湖南', '广东', '\n广西', '海南', '\n重庆', '四川', '\n贵州',
                        '云南', '\n西藏', '陕西', '\n甘肃', '青海', '\n宁夏', '新疆'
                    ],
                    splitLine: {show: false}
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'GDP（亿元）',
                        // max: 53500
                        max: 30000
                    }
                ],
                series: [
                    {name: 'GDP', type: 'bar'},
                    {name: '金融', type: 'bar'},
                    {name: '房地产', type: 'bar'},
                    {name: '第一产业', type: 'bar'},
                    {name: '第二产业', type: 'bar'},
                    {name: '第三产业', type: 'bar'},
                    {
                        name: 'GDP占比',
                        type: 'pie',
                        center: ['75%', '35%'],
                        radius: '28%'
                    }
                ]
            },
            options: [
                {
                    title: {text: '2002全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2002']},
                        {data: dataMap.dataFinancial['2002']},
                        {data: dataMap.dataEstate['2002']},
                        {data: dataMap.dataPI['2002']},
                        {data: dataMap.dataSI['2002']},
                        {data: dataMap.dataTI['2002']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2002sum']},
                                {name: '第二产业', value: dataMap.dataSI['2002sum']},
                                {name: '第三产业', value: dataMap.dataTI['2002sum']}
                            ]
                        }
                    ]
                },
                {
                    title: {text: '2003全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2003']},
                        {data: dataMap.dataFinancial['2003']},
                        {data: dataMap.dataEstate['2003']},
                        {data: dataMap.dataPI['2003']},
                        {data: dataMap.dataSI['2003']},
                        {data: dataMap.dataTI['2003']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2003sum']},
                                {name: '第二产业', value: dataMap.dataSI['2003sum']},
                                {name: '第三产业', value: dataMap.dataTI['2003sum']}
                            ]
                        }
                    ]
                },
                {
                    title: {text: '2004全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2004']},
                        {data: dataMap.dataFinancial['2004']},
                        {data: dataMap.dataEstate['2004']},
                        {data: dataMap.dataPI['2004']},
                        {data: dataMap.dataSI['2004']},
                        {data: dataMap.dataTI['2004']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2004sum']},
                                {name: '第二产业', value: dataMap.dataSI['2004sum']},
                                {name: '第三产业', value: dataMap.dataTI['2004sum']}
                            ]
                        }
                    ]
                },
                {
                    title: {text: '2005全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2005']},
                        {data: dataMap.dataFinancial['2005']},
                        {data: dataMap.dataEstate['2005']},
                        {data: dataMap.dataPI['2005']},
                        {data: dataMap.dataSI['2005']},
                        {data: dataMap.dataTI['2005']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2005sum']},
                                {name: '第二产业', value: dataMap.dataSI['2005sum']},
                                {name: '第三产业', value: dataMap.dataTI['2005sum']}
                            ]
                        }
                    ]
                },
                {
                    title: {text: '2006全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2006']},
                        {data: dataMap.dataFinancial['2006']},
                        {data: dataMap.dataEstate['2006']},
                        {data: dataMap.dataPI['2006']},
                        {data: dataMap.dataSI['2006']},
                        {data: dataMap.dataTI['2006']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2006sum']},
                                {name: '第二产业', value: dataMap.dataSI['2006sum']},
                                {name: '第三产业', value: dataMap.dataTI['2006sum']}
                            ]
                        }
                    ]
                },
                {
                    title: {text: '2007全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2007']},
                        {data: dataMap.dataFinancial['2007']},
                        {data: dataMap.dataEstate['2007']},
                        {data: dataMap.dataPI['2007']},
                        {data: dataMap.dataSI['2007']},
                        {data: dataMap.dataTI['2007']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2007sum']},
                                {name: '第二产业', value: dataMap.dataSI['2007sum']},
                                {name: '第三产业', value: dataMap.dataTI['2007sum']}
                            ]
                        }
                    ]
                },
                {
                    title: {text: '2008全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2008']},
                        {data: dataMap.dataFinancial['2008']},
                        {data: dataMap.dataEstate['2008']},
                        {data: dataMap.dataPI['2008']},
                        {data: dataMap.dataSI['2008']},
                        {data: dataMap.dataTI['2008']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2008sum']},
                                {name: '第二产业', value: dataMap.dataSI['2008sum']},
                                {name: '第三产业', value: dataMap.dataTI['2008sum']}
                            ]
                        }
                    ]
                },
                {
                    title: {text: '2009全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2009']},
                        {data: dataMap.dataFinancial['2009']},
                        {data: dataMap.dataEstate['2009']},
                        {data: dataMap.dataPI['2009']},
                        {data: dataMap.dataSI['2009']},
                        {data: dataMap.dataTI['2009']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2009sum']},
                                {name: '第二产业', value: dataMap.dataSI['2009sum']},
                                {name: '第三产业', value: dataMap.dataTI['2009sum']}
                            ]
                        }
                    ]
                },
                {
                    title: {text: '2010全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2010']},
                        {data: dataMap.dataFinancial['2010']},
                        {data: dataMap.dataEstate['2010']},
                        {data: dataMap.dataPI['2010']},
                        {data: dataMap.dataSI['2010']},
                        {data: dataMap.dataTI['2010']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2010sum']},
                                {name: '第二产业', value: dataMap.dataSI['2010sum']},
                                {name: '第三产业', value: dataMap.dataTI['2010sum']}
                            ]
                        }
                    ]
                },
                {
                    title: {text: '2011全国宏观经济指标'},
                    series: [
                        {data: dataMap.dataGDP['2011']},
                        {data: dataMap.dataFinancial['2011']},
                        {data: dataMap.dataEstate['2011']},
                        {data: dataMap.dataPI['2011']},
                        {data: dataMap.dataSI['2011']},
                        {data: dataMap.dataTI['2011']},
                        {
                            data: [
                                {name: '第一产业', value: dataMap.dataPI['2011sum']},
                                {name: '第二产业', value: dataMap.dataSI['2011sum']},
                                {name: '第三产业', value: dataMap.dataTI['2011sum']}
                            ]
                        }
                    ]
                }
            ]
        };

        chart.setOption(option);

        chart.on('legendSelected', function () {
        });

        chart.on('click', function (params) {
            console.log(params);
        });

        window.onresize = chart.resize;
    });
</script>
</body>
</html>
